<template>
  <div class="role">
    <div
      class="card"
      @mouseover="identityFn(i)"
      v-for="(v, i) in renderData"
      :key="v.id"
    >
      <div class="left">
        <img
          src="https://img1.baidu.com/it/u=543949590,493497069&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500"
          class="image"
        />
        <el-tooltip
          class="item"
          effect="dark"
          content="点击编辑"
          placement="bottom-end"
        >
          <el-button
            @click="edit(i)"
            style="margin-top: 10px"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </el-tooltip>
      </div>
      <div class="right">
        <h3>{{ v.roleName }}</h3>
        <p style="height: 40px"><span>权限:</span>{{ v.menu }}</p>
        <p><span>职能描述:</span></p>
        <span>启用角色:</span>
        <el-switch
          @change="change"
          :disabled="boolean"
          v-model="switchArr[i]"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </div>
    </div>
    <!-- 权限dialog -->
    <el-dialog title="权限修改" :visible.sync="dialogVisible" width="34%">
      <span style="color: #f35c5c">已有权限：</span>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <br />
      <br />
      <hr />
      <br />
      <span style="color: #f35c5c">添加权限：</span>
      <el-select
        size="medium"
        class="input-new-tag"
        v-model="inputValue"
        @keyup.enter.native="handleInputConfirm"
        ref="saveTagInput"
        placeholder="请选择加入的权限"
      >
        <el-option label="增加权限" value="添加操作"></el-option>
        <el-option label="删除权限" value="删除操作"></el-option>
        <el-option label="修改权限" value="修改操作"></el-option>
      </el-select>
      <el-button
        style="position: relative; top: 4px; height: 34px"
        class="button-new-tag"
        type="success"
        size="small"
        @click="handleInputConfirm"
        >加入权限</el-button
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boolean: false,
      identity: null,
      dynamicTags: null,
      inputVisible: false,
      dialogVisible: false,
      title: "角色管理",
      value: "",
      inputValue: "",
      renderData: [],
      switchArr: [],
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      let res = this.dynamicTags.some((v) => {
        return inputValue == v;
      });
      console.log(222, res);
      if (res) {
        this.$message.error("已经有此权限");
      } else {
        if (inputValue) {
          console.log(this.dynamicTags);
          this.dynamicTags.push(inputValue);
        }
      }

      this.inputVisible = false;
      this.inputValue = "";
    },

    edit(v) {
      // if (v == 0) {
      //   this.identity = "超级管理员";
      //   console.log();
      //   this.dialogVisible = true;
      //   let newDynamicTags = [...this.renderData[0].menu];
      //   this.dynamicTags = newDynamicTags;
      // } else if (v == 1) {
      //   this.identity = "普通角色";
      //   this.dialogVisible = false;
      //   this.$message.error("超级管理员不可修改");
      //   let newDynamicTags = [...this.renderData[1].menu];
      //   this.dynamicTags = newDynamicTags;
      // } else {
      //   this.identity = "访客";
      //   this.dialogVisible = true;
      //   let newDynamicTags = [...this.renderData[2].menu];
      //   this.dynamicTags = newDynamicTags;
      // }
      if (this.identity == "超级管理员") {
        this.dialogVisible = false;
        this.$message.error("超级管理员不可修改");
        let newDynamicTags = [...this.renderData[1].menu];
        this.dynamicTags = newDynamicTags;
      } else if (this.identity == "访客") {
        this.dialogVisible = true;
        let newDynamicTags = [...this.renderData[2].menu];
        this.dynamicTags = newDynamicTags;
        console.log(this.dynamicTags);
      } else {
        this.dialogVisible = true;
        let newDynamicTags = [...this.renderData[0].menu];
        this.dynamicTags = newDynamicTags;
      }
    },
    save() {
      this.dialogVisible = false;
      console.log(this.identity);
      if (this.identity == "普通角色") {
        this.$axios({
          url: "roleMenu/10",
          method: "put",
          data: this.dynamicTags,
        }).then((res) => {
          console.log(111, res);
          console.log(this.renderData);
          this.render();
        });
      } else {
        this.$axios({
          url: "roleMenu/30",
          method: "put",
          data: this.dynamicTags,
        }).then((res) => {
          console.log(222, res);
          this.render();
        });
      }
    },
    //确认身份
    identityFn(i) {
      if (i == 0) {
        this.boolean = false;
        this.identity = "普通角色";
      } else if (i == 1) {
        this.boolean = true;
        this.identity = "超级管理员";
      } else {
        this.identity = "访客";
        this.boolean = false;
      }
    },
    change(v) {
      console.log(v, this.identity);
      if (this.identity == "超级管理员") {
        this.$message.error("此角色无法禁用");
      } else if (this.identity == "普通角色") {
        this.$axios({
          url: `roleStatus/10/${v}`,
          method: "put",
        }).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.render();
            if (this.renderData[0].status == 0) {
              this.$message.success("已启用");
            } else {
              this.$message.error("已停用");
            }
          }
        });
      } else {
        this.$axios({
          url: `roleStatus/30/${v}`,
          method: "put",
        }).then((res) => {
          if (res.data.code == 200) {
            this.render();
            if (this.renderData[2].status == 0) {
              this.$message.success("已启用");
            } else {
              this.$message.error("已停用");
            }
          }
        });
      }
    },
    render() {
      this.$axios({
        url: "/roles",
      }).then((res) => {
        console.log(res.data.data);
        this.renderData = res.data.data;
        this.renderData.forEach((v, i) => {
          if (v.status == 1) {
            this.switchArr[i] = 1;
          } else {
            this.switchArr[i] = 0;
          }
        });
      });
    },
  },
  mounted() {
    this.$emit("title", this.title);
    this.render();
  },
};
</script>

<style lang="less" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.role {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  .card {
    display: flex;
    padding: 20px;
    border: 1px solid #ccc;
    width: 320px;
    aspect-ratio: 16/9;
    margin: 15px;
    box-shadow: 0 0 2px 2px rgba(187, 184, 184, 0.2);
    &:hover {
      box-shadow: 0 0 5px 5px rgba(187, 184, 184, 0.4);
    }
    .image {
      float: left;
      width: 80px;
      border-radius: 10px;
      border: 1px solid #647af3;
    }
  }
}
.left {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.right {
  margin-left: 10px;
  flex: 1;
  text-align: left;
  // outline: solid red;
  p {
    color: #f35c5c;
    margin: 6px 0;
  }
  span {
    color: #0a92fa;
    margin-right: 10px;
  }
  h3 {
    font-size: 1.3em;
    margin: 10px 0 20px 0;
  }
}
/deep/.el-dialog {
  text-align: left;
}
/deep/.el-select {
  width: 160px;
  height: 30px;
}
</style>